<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$newsInfo['title']}</title>
    <meta content="NONE" name="ROBOTS">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="" name="description">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="twcClient" id="twcClient" content="false">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/base.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/mod.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/list.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/page.css" />


    <style type="text/css">
    body {margin:0; padding:0; font-size:12px; font-family: -apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; line-height:16px;}
    #header, #article, #image, #likes, #comments, #footer, .line {clear:both;}
    #page {max-width:750px; margin:auto;}
    #header {height:76px;}
    #article {margin:0 10px;}
    #image {margin-bottom:15px;}
    .hide {display:block;}
    img{ max-width: 100%; height: auto; }
    #header .hl, #header .hr .hd, #likes .user_count, #comments .item .lz {background-size:100%; background-repeat:no-repeat;}
    #header .hl {float:left; width:162px; height:45px; margin:16px 0 0 15px; background-image:url("/static/images/share/logo.png");}
    #header .hr {float:right; width:91px; height:28px; margin:24px 15px 0 0;}
    #header .hr .hd {width:100%; height:100%; background-image:url("/static/images/share/hd.png");}

    #article .title {margin-top:10px; font-size:17px; font-weight:bold;}
    #article .desc {margin:7px 0 15px 0; color:#ADADB3;}
    #article .content {font-size:15px; line-height:20px; color:#676A6D;margin:10px 15px; word-break:break-all; word-wrap:break-word;}
    #image .content {font-size:15px; line-height:20px; color:#676A6D;margin:10px 15px}

    #image .thread {margin:15px 10px 0 15px; height:41px;}
    #image .thread .header, #image .thread .other {float:left;}
    #image .thread .header {width:41px; height:41px; margin:0 15px 0 0;}
    #image .thread .header img {width:100%; height:100%; border-radius:25px;}
    #image .thread .other .name {line-height:20px; font-size:15px; color:#4F4F4F;}
    #image .thread .other {line-height:20px; color:#ADADB3;}
    #image .images .show {clear:both; width:100%; overflow: hidden; text-align:center; vertical-align:middle; background-color:#f5f7fa;}
    #image .images {margin-top:15px;}
    #image .images .show img {max-width:100%;}
    #image .list {height:74px; margin-top:6px ; width: 100%; overflow: hidden; overflow-x:visible;  }
    #image .list img{width:70px; height:70px; margin:0; padding:0; border:solid 2px #fff; vertical-align:middle;}
    #image .list .on {border:solid 2px #32B7DB;}
    #image .list .nl {width:300%;}

    #likes .heart_line {height:15px; margin-top:15px;}
    #likes .heart, #likes .heart_count {display: inline-block; vertical-align: middle;}
    #likes .heart {
        padding-left:18px;width:50px; height:37px; line-height:37px; margin:0 7px 0 0; 
        background:url("/static/images/share/heart.png") no-repeat left center;
        background-size: 16px 15px;
        }
    #likes .heart_count {font-size:14px; color:#ADADB3;}
    #likes .user_line {clear:both; height:33px; margin:15px 0 15px 10px;}
    #likes .user_header { float: right; }
    #likes .user_header img {width:33px; height:33px; margin:0; border:none; border-radius:25px;}
    #likes .user_count {
        min-width:33px; height:33px; margin-left:4px; border-radius: 33px; background-color: #F4F5FA;
        text-align: center; line-height: 30px; color: #B0B1B7;}
    #comments .title {margin:15px 0; font-size:14px; color:#adadb3;background:#f5f7fa; padding: 10px;}
    #comments .item {padding:10px 0;border-bottom:1px solid #DADAD8;}
    #comments .item .header, #comments .item .name, #comments .item .lz {float:left;}
    #comments .item .header img {width:26px; height:26px; border-radius:25px;}
    #comments .item .name {margin-left:5px; line-height:26px; font-size:14px; color:#ADADB3;}
    #comments .item .lz {width:26px; height:14px; margin:7px 0 0 5px; background-image:url("/static/images/share/lz.png");}
    #comments .item .content {clear:both; padding-top:5px; font-size:14px; color:#4F4F4F;}
    #footer .fd {height:44px; margin:15px 15px 38px 15px;}
    #footer .fdc {height:100%; border:solid 1px #3BB7D9; border-radius:25px; background-image:url("/static/images/share/fdct.png"); background-repeat:no-repeat; background-size:auto 30%; background-position:center;}
    dd at { color:#318bb9;position: relative;padding-left: 13px; }
    dd at:before{ position: absolute; content: "@"; left: 0px;top: 2px; }
    </style>
</head>

<body>
    <div id="page">
        <div id="header">
            <div class="ht">
                <div class="hl"></div>
                <div class="hr">
                   <a href="http://mobile.hupu.com/download/joggers?r=share"><div class="hd"></div></a>
                </div>
            </div>
        </div>

        <!-- <div class="line"></div> -->
        {if $newsInfo['type'] == 1}
        <div id="article" class="hide">
            <div class="title">{$newsInfo['title']}</div>
            <div class="desc">
                <span class="time">{$publishTime}</span>
                <span class="comment_count">{if $commentCount>0}{$commentCount}{else}暂无{/if}评论</span>
            </div>
            <div class="content">
                <p>{$newsInfo['content']}</p>
            </div>
        </div>
        {else}
        <div id="image">
            <div class="thread">
                <div class="user">
                    <div class="header"><img src="{$newsInfo['header']}" /></div>
                    <div class="other">
                        <div class="name">{$newsInfo['nickname']}</div>
                        <div class="other">
                            <span class="time">{$publishTime}</span>
                            <span class="comment_count">{if $commentCount>0}{$commentCount}{else}暂无{/if}评论</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content">
                <p>{$newsInfo['content']}</p>
            </div>
            {if !empty($newsInfo['sourceImg'])}
                <div class="images">
                    <div class="show">
                        <img src="{$newsInfo['sourceImg'][0]}?imageMogr2/thumbnail/750x750" class="show_image" />
                    </div>
                    <div class="list">
                        <div class="nl">
                            {loop $newsInfo['sourceImg'] $k $val}
                            <a href="{$val}">
                                <img src="$newsInfo['thumb_img'][$k]" {if $k==0} class="on" {/if} /></a>
                            {/loop}
                        </div>
                    </div>
                </div>
            {/if}
        </div>
        {/if}

        {if $likeNum > 0}
       <!--  <div class="line"></div> -->
        <div id="likes" class="p10">
             <div class="heart">{$likeNum}人</div>
            <div class="user_header">
                {eval $li = 0}
                    {loop $likeList $header}
                        {if $li < 5}
                            <img src="{$header['header']}" />
                        {/if}
                    {eval $li++}
                {/loop}
            </div>
         </div>

       <!--  <div class="line"></div> -->
        {/if}
        {if $commentCount > 0 }
            <div id="comments">
                <div class="title">最新评论</div>
                <ul class="list-08">
                   {loop $hotComment $k $info}
                        <li>
                            <img src="{$info['header']}" />
                            <dl>
                                <dt>
                                    <span class="color_dakgray">{$info['nickname']}</span><br/>
                                    <span class="f10 color_gray">
                                        {eval echo $commentCount-$k}楼
                                        {eval echo common::timediff(time() - $info['add_time'])}
                                    </span>
                                    <span class="ico-light">{$info['lights']}</span>
                                </dt>
                                <dd>
                                    {$info['comment_content']}
                                </dd>
                            </dl>
                        </li>
                     {/loop}
                </ul>
             </div>
        {/if}
        <div id="footer">
            <div class="fd">
                <a href="http://mobile.hupu.com/download/joggers?r=share"><div class="fdc"></div></a>
            </div>
        </div>
    </div>

    <script src="/static/lightbox2/js/lightbox-plus-jquery.min.js"></script>
    <script type="text/javascript">
        
        $(function(){

            var show = $('#image .images .show');
            show.attr({'style': 'height:' + show.width() + 'px;'});
            $('#image .show_image').on('load', function(){showImg($(this))});

            var ln = $('#image .list .nl');
            var li = $('#image .list img');
            var lio = $('#image .list .on');
            ln.attr({'style':'width:' + ((lio.width() + 7.5) * li.length) + 'px;'});

            $('#article .content img').each(function(){
                var a = $(this).parent();
                if(a[0]['nodeName'] == 'A') {
                    $(a).attr({'data-lightbox': 'content_images'});
                }
            });

            $('#image .list a').on('click', function(){
                var imageObj = $('#image .show img')
                var hf = $(this).attr('href');
                var listAObj = this;

                $(this).parent().find('img').each(function() {
                    $(this).removeClass('on');
                });
                
                $('#image .show a').attr({'href': hf});
                $(listAObj).find('img').addClass('on');
                imageObj.attr({'src': hf + '?imageMogr2/thumbnail/750x750'});
                showImg($(imageObj));

                return false;
            });

            function showImg(imageObj) {
                imageObj.attr({'style': 'margin-top:' + ((show.width() - imageObj.height()) / 2) + 'px;'});
            }
        });
    </script>

    <script type="text/javascript">
        // Weixin

        var newsUrl = window.location.href;
        var iconUrl = 'http://irun.hupu.com/static/images/share/icon.png';
        var dataForWeixin={
            appId:"",
              TLImg: iconUrl,
              url: newsUrl,
              title: document.title,
              desc:"虎扑跑步",
              fakeid:"",
              callback:function(){}
        };
        (function() {
            var onBridgeReady=function() {
            WeixinJSBridge.on('menu:share:timeline', function(argv) {
            (dataForWeixin.callback)();
                WeixinJSBridge.invoke('shareTimeline', {
                    "img_url":dataForWeixin.TLImg,
                    "img_width":"120",
                    "img_height":"120",
                    "link":dataForWeixin.url,
                    "desc":dataForWeixin.desc,
                    "title":dataForWeixin.title
                    }, function(res){});
                });
            };
            if(document.addEventListener) {
               document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if(document.attachEvent) {
               document.attachEvent('WeixinJSBridgeReady',onBridgeReady);
               document.attachEvent('onWeixinJSBridgeReady',onBridgeReady);
            }
        })();

        // Google analytics
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
         })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-53856379-2', 'hupu.com');
        ga('send', 'pageview');
    </script>
</body>
{template 'show/web-footer'}
